<template>
  <div class="music-test">
    <h1>AI音乐创作测试</h1>
    
    <div class="section">
      <h2>音乐创作</h2>
      <form @submit.prevent="createMusic">
        <div class="form-group">
          <label>标题:</label>
          <input v-model="musicForm.title" type="text" required>
        </div>
        <div class="form-group">
          <label>风格:</label>
          <select v-model="musicForm.style">
            <option value="pop">流行音乐</option>
            <option value="classical">古典音乐</option>
            <option value="rock">摇滚音乐</option>
            <option value="electronic">电子音乐</option>
            <option value="jazz">爵士音乐</option>
          </select>
        </div>
        <div class="form-group">
          <label>描述:</label>
          <textarea v-model="musicForm.description" required></textarea>
        </div>
        <button type="submit">创建音乐</button>
      </form>
    </div>

    <div class="section">
      <h2>语音合成</h2>
      <form @submit.prevent="synthesizeSpeech">
        <div class="form-group">
          <label>文本内容:</label>
          <textarea v-model="synthesisForm.text_content" required></textarea>
        </div>
        <div class="form-group">
          <label>音色:</label>
          <select v-model="synthesisForm.voice_type">
            <option value="0">女声 - 度小宇</option>
            <option value="1">男声 - 度小美</option>
            <option value="3">男声 - 度逍遥</option>
            <option value="4">男声 - 度丫丫</option>
          </select>
        </div>
        <button type="submit">合成语音</button>
      </form>
    </div>

    <div class="section">
      <h2>音乐作品列表</h2>
      <button @click="loadMusicList">加载列表</button>
      <div v-if="musicList.length > 0">
        <div v-for="music in musicList" :key="music.id" class="music-item">
          <h3>{{ music.title }}</h3>
          <p>风格: {{ music.style }}</p>
          <p>描述: {{ music.description }}</p>
          <p>状态: {{ music.status }}</p>
          <button @click="deleteMusic(music.id)">删除</button>
        </div>
      </div>
      <div v-else>
        <p>暂无音乐作品</p>
      </div>
    </div>
  </div>
</template>

<script>
import { musicApi } from '@/api/music'

export default {
  name: 'MusicTest',
  data() {
    return {
      musicForm: {
        title: '',
        style: 'pop',
        description: ''
      },
      synthesisForm: {
        text_content: '',
        voice_type: '0'
      },
      musicList: []
    }
  },
  methods: {
    async createMusic() {
      try {
        const response = await musicApi.compose.create(this.musicForm)
        console.log('音乐创作响应:', response)
        alert('音乐创作任务已创建')
        this.musicForm = { title: '', style: 'pop', description: '' }
      } catch (error) {
        console.error('音乐创作失败:', error)
        alert('音乐创作失败: ' + error.message)
      }
    },
    
    async synthesizeSpeech() {
      try {
        const response = await musicApi.compose.synthesize(this.synthesisForm)
        console.log('语音合成响应:', response)
        alert('语音合成成功')
        this.synthesisForm = { text_content: '', voice_type: '0' }
      } catch (error) {
        console.error('语音合成失败:', error)
        alert('语音合成失败: ' + error.message)
      }
    },
    
    async loadMusicList() {
      try {
        const response = await musicApi.compositions.getList()
        console.log('音乐列表响应:', response)
        this.musicList = response.data.compositions
      } catch (error) {
        console.error('加载音乐列表失败:', error)
        alert('加载音乐列表失败: ' + error.message)
      }
    },
    
    async deleteMusic(id) {
      try {
        const response = await musicApi.compositions.delete(id)
        console.log('删除音乐响应:', response)
        alert('音乐作品已删除')
        this.loadMusicList()
      } catch (error) {
        console.error('删除音乐失败:', error)
        alert('删除音乐失败: ' + error.message)
      }
    }
  }
}
</script>

<style scoped>
.music-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.music-item {
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.music-item h3 {
  margin-top: 0;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>